<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>

    <script type="text/javascript" th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}"></script>

    <script type="text/javascript" th:src="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"></script>

    <script type="text/javascript" th:src="@{/js/jquery-1.12.4.min.js}"></script>

    <script type="text/javascript" th:src="@{/js/jquery.md5.js}"></script>

</head>
<body>


    <div>秒杀商品详情</div>

    <div>
        <span th:if="${user eq null}">您还没有登录，请登陆后操作<br/></span>
        <span>没有收货地址的提示</span>
    </div>

    <table class="table" id="goodsList">

        <tr>
            <td>商品名称</td>
            <td th:text="${goods.goodsName}"></td>
        </tr>

        <tr>
            <td>商品图片</td>
            <td><img th:src="@{${goods.goodsImg}}" width="100" height="100"/></td>
        </tr>

        <tr>
            <td>秒杀开始时间</td>
            <td th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>

            <td id="miaoshaTip" >
                <input type="hidden" id="remainSeconds" th:value="${remainSeconds}">
                <span th:if="${miaoshaStatus} eq 0">秒杀倒计时: <span id="countDown" th:text="${remainSeconds}"> </span>秒</span>
                <span th:if="${miaoshaStatus} eq 1">秒杀进行中</span>
                <span th:if="${miaoshaStatus} eq 2">秒杀已经结束</span>
            </td>

            <td>
            <form id="miaoshaForm" method="post" action="/miaosha/do_miaosha">
                <button class="btn btn-primary btn-block" type="submit" id="butButton">立即秒杀</button>
                <input type="hidden" name="goodsId" th:value="${goods.id}">
            </form>
            </td>
        </tr>

        <tr>
            <td>商品原价</td>
            <td th:text="${goods.goodsPrice}"></td>
        </tr>

        <tr>
            <td>商品秒杀价</td>
            <td th:text="${goods.miaoshaPrice}"></td>
        </tr>

        <tr>
            <td>库存数量</td>
            <td th:text="${goods.stockCount}"></td>
        </tr>

    </table>

</body>

<script>

    $(function () {
        countDown();
    });

    function countDown() {

        var remainSeconds = $("#remainSeconds").val();
        var timeout;   //定时器

        if (remainSeconds > 0) {   //秒杀没开始，倒计时

            $("#butButton").attr("disabled",true);
            timeout = setTimeout(function () {

                $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();

            },1000);

        }else if (remainSeconds == 0){  //秒杀正在进行中

            $("#butButton").attr("disabled",false);

            if (timeout){
                clearTimeout(timeout);   //清除定时器
            }
            $("#miaoshaTip").html("秒杀正在进行中")

        }else{      //秒杀结束

            $("#butButton").attr("disabled",true);
            $("#miaoshaTip").html("秒杀结束")
        }
    }





</script>










</html>